<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hero - Multipurpose HTML template</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap">
<link rel="stylesheet" href="assets/css/font-icons/lineicons.min.css">
<link rel="stylesheet" href="assets/css/plugins/simplebar/simplebar.min.css">
<link rel="stylesheet" href="assets/css/common.css">
<link rel="stylesheet" href="assets/css/main.css?v=1.3">
</head>
<body>
<header id="main-header">
  <div class="clearfix">
    <div class="float-left"> <a href="index.html" class="clearfix" id="main-link">
      <div class="float-left"> <i class="lni lni-user"></i> </div>
      <div class="float-left">
        <div id="my-name" class="overflow-h-ellipsis">Siri Ben</div>
      </div>
      </a> </div>
    <div class="float-right"> <span id="video-btn" class="know-more-section-btn"> <span class="pointer"> <i class="lni lni-menu"></i> </span> </span> </div>
  </div>
</header>
<main>
  <div id="main-container">
    <div class="window active" id="about">
      <div class="window-header">
        <div class="window-title">关于我们</div>
        <div class="clearfix float-right window-header-btns">
          <div class="float-left pointer window-header-btn window-expand-btn"> <i class="lni lni-frame-expand"></i> </div>
          <div class="float-left pointer window-header-btn window-close-btn"> <a href="#"><i class="lni lni-close"></i></a> </div>
        </div>
      </div>
      <div class="window-body backdrop" data-simplebar>
        <div class="window-content">
          <div id="my-photo"> <img src="assets/img/my-photo/my-photo.jpg" alt="John Doe"> </div>
          <div id="intro-line">Siri Ben</div>
          <div id="intro-secondary-line">软件工程师</div>
          <p id="about-me-lines">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我是一个非常有能力的IT专业人士，在设计网站、网络和管理数据库方面有良好的记录。我有较强的技术能力和优秀的人际交往能力，能够与广泛的客户进行交流。我渴望接受挑战，以便成长和进一步提高我的IT技能。我生活中最大的热情就是用我的技术知识造福他人和组织。.</p>
          <div id="doc-link"> <a href="assets/docs/cv.pdf" download> <i class="lni lni-download"></i> <span>Download CV</span> </a> </div>
          <div id="freelance"> <span>我是一名自由职业者. <a href="#contact">联系我们</a></span> </div>
        </div>
      </div>
    </div>
    <div class="window" id="skills">
      <div class="window-header">
        <div class="window-title">技能展示</div>
        <div class="clearfix float-right window-header-btns">
          <div class="float-left pointer window-header-btn window-expand-btn"> <i class="lni lni-frame-expand"></i> </div>
          <div class="float-left pointer window-header-btn window-close-btn"> <a href="#"><i class="lni lni-close"></i></a> </div>
        </div>
      </div>
      <div class="window-body backdrop" data-simplebar>
        <div class="window-content">
          <div class="skill">
            <div class="skill-info">
              <div class="skill-name">HTML5</div>
              <div class="skill-exp">5+ Years exp</div>
            </div>
            <div class="skill-meter" style="width: 96%"> <span>96%</span> </div>
          </div>
          <div class="skill">
            <div class="skill-info">
              <div class="skill-name">CSS3</div>
              <div class="skill-exp">5+ Years exp</div>
            </div>
            <div class="skill-meter" style="width: 94%"> <span>94%</span> </div>
          </div>
          <div class="skill">
            <div class="skill-info">
              <div class="skill-name">JavaScript</div>
              <div class="skill-exp">4+ Years exp</div>
            </div>
            <div class="skill-meter" style="width: 86%"> <span>86%</span> </div>
          </div>
          <div class="skill">
            <div class="skill-info">
              <div class="skill-name">jQuery</div>
              <div class="skill-exp">4+ Years exp</div>
            </div>
            <div class="skill-meter" style="width: 90%"> <span>90%</span> </div>
          </div>
          <div class="skill">
            <div class="skill-info">
              <div class="skill-name">SEO</div>
              <div class="skill-exp">3+ Years exp</div>
            </div>
            <div class="skill-meter" style="width: 80%"> <span>80%</span> </div>
          </div>
        </div>
      </div>
    </div>
    <div class="window" id="education">
      <div class="window-header">
        <div class="window-title">教育背景</div>
        <div class="clearfix float-right window-header-btns">
          <div class="float-left pointer window-header-btn window-expand-btn"> <i class="lni lni-frame-expand"></i> </div>
          <div class="float-left pointer window-header-btn window-close-btn"> <a href="#"><i class="lni lni-close"></i></a> </div>
        </div>
      </div>
      <div class="window-body backdrop" data-simplebar>
        <div class="window-content">
          <div class="education">
            <div class="edu-name">Acoustic guitar</div>
            <div class="edu-major">Fingerstyle</div>
            <div class="edu-duration">2017-2019</div>
            <div class="edu-institute">Royal College of Music</div>
          </div>
          <div class="education">
            <div class="edu-name">M.Tech</div>
            <div class="edu-major">Information technology</div>
            <div class="edu-duration">2017-2019</div>
            <div class="edu-institute">Oxford University</div>
          </div>
          <div class="education">
            <div class="edu-name">B.Tech</div>
            <div class="edu-major">Information technology</div>
            <div class="edu-duration">2017-2019</div>
            <div class="edu-institute">Oxford University</div>
          </div>
        </div>
      </div>
    </div>
    <div class="window" id="experience">
      <div class="window-header">
        <div class="window-title">工作经历</div>
        <div class="clearfix float-right window-header-btns">
          <div class="float-left pointer window-header-btn window-expand-btn"> <i class="lni lni-frame-expand"></i> </div>
          <div class="float-left pointer window-header-btn window-close-btn"> <a href="#"><i class="lni lni-close"></i></a> </div>
        </div>
      </div>
      <div class="window-body backdrop" data-simplebar>
        <div class="window-content">
          <div class="experience">
            <div class="exp-name">Professional guitarist</div>
            <div class="exp-duration">2017-2019</div>
            <div class="exp-company">YouTube</div>
            <div class="exp-jd">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
          </div>
          <div class="experience">
            <div class="exp-name">Web designer</div>
            <div class="exp-duration">2017-2019</div>
            <div class="exp-company">Google</div>
            <div class="exp-jd">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
          </div>
          <div class="experience">
            <div class="exp-name">Front-end engineer</div>
            <div class="exp-duration">2017-2019</div>
            <div class="exp-company">Samsung</div>
            <div class="exp-jd">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
          </div>
          <div class="experience">
            <div class="exp-name">UI developer</div>
            <div class="exp-duration">2017-2019</div>
            <div class="exp-company">Twitter</div>
            <div class="exp-jd">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
          </div>
        </div>
      </div>
    </div>
    <div class="window" id="services">
      <div class="window-header">
        <div class="window-title">项目经验</div>
        <div class="clearfix float-right window-header-btns">
          <div class="float-left pointer window-header-btn window-expand-btn"> <i class="lni lni-frame-expand"></i> </div>
          <div class="float-left pointer window-header-btn window-close-btn"> <a href="#"><i class="lni lni-close"></i></a> </div>
        </div>
      </div>
      <div class="window-body backdrop" data-simplebar>
        <div class="window-content">
          <div id="services-body">
            <div class="clearfix" id="services-body-inner">
              <div class="float-left service">
                <div class="service-body">
                  <div class="service-icon"> <i class="lni lni-code-alt"></i> </div>
                  <div class="service-name">Web design</div>
                  <div class="service-description line-clamp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                </div>
              </div>
              <div class="float-left service">
                <div class="service-body">
                  <div class="service-icon"> <i class="lni lni-brush-alt"></i> </div>
                  <div class="service-name">Logo design</div>
                  <div class="service-description line-clamp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                </div>
              </div>
              <div class="float-left service">
                <div class="service-body">
                  <div class="service-icon"> <i class="lni lni-pie-chart"></i> </div>
                  <div class="service-name">SEO</div>
                  <div class="service-description line-clamp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                </div>
              </div>
              <div class="float-left service">
                <div class="service-body">
                  <div class="service-icon"> <i class="lni lni-target-customer"></i> </div>
                  <div class="service-name">Digital marketing</div>
                  <div class="service-description line-clamp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                </div>
              </div>
              <div class="float-left service">
                <div class="service-body">
                  <div class="service-icon"> <i class="lni lni-video"></i> </div>
                  <div class="service-name">Video editing</div>
                  <div class="service-description line-clamp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                </div>
              </div>
              <div class="float-left service">
                <div class="service-body">
                  <div class="service-icon"> <i class="lni lni-gallery"></i> </div>
                  <div class="service-name">Image editing</div>
                  <div class="service-description line-clamp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                </div>
              </div>
            </div>
          </div>
          <div id="service-plans">
            <div id="plans-heading">Select your plan</div>
            <div class="clearfix" id="service-plans-body">
              <div class="float-left service-plan">
                <div class="service-plan-body">
                  <div class="service-plan-name">Starter</div>
                  <div class="service-plan-price">5.99$ / month</div>
                  <div class="service-plan-features">
                    <div class="plan-feature">30 days money back guarantee</div>
                    <div class="plan-feature">Email support</div>
                    <div class="plan-feature">2 PSD to HTML</div>
                    <div class="plan-feature">1 website design</div>
                    <div class="plan-feature">2 code revisions</div>
                    <div class="plan-feature">1 website SEO project</div>
                    <div class="plan-feature">1 video editing project</div>
                    <div class="plan-feature">30 image editing</div>
                  </div>
                  <a class="plan-link gradient-1" href="#">Go starter<i class="lni lni-chevron-right"></i></a> </div>
              </div>
              <div class="float-left service-plan">
                <div class="service-plan-body">
                  <div class="service-plan-name">Super</div>
                  <div class="service-plan-price">8.99$ / month</div>
                  <div class="service-plan-features">
                    <div class="plan-feature">30 days money back guarantee</div>
                    <div class="plan-feature">Email and telephone support</div>
                    <div class="plan-feature">12 PSD to HTML</div>
                    <div class="plan-feature">5 website design</div>
                    <div class="plan-feature">5 code revisions</div>
                    <div class="plan-feature">5 website SEO projects</div>
                    <div class="plan-feature">5 video editing projects</div>
                    <div class="plan-feature">80 image editing</div>
                  </div>
                  <a class="plan-link gradient-5" href="#">Go super<i class="lni lni-chevron-right"></i></a> </div>
              </div>
              <div class="float-left service-plan">
                <div class="service-plan-body">
                  <div class="service-plan-name">Pro</div>
                  <div class="service-plan-price">12.99$ / month</div>
                  <div class="service-plan-features">
                    <div class="plan-feature">30 days money back guarantee</div>
                    <div class="plan-feature">Email, telephone, skype support</div>
                    <div class="plan-feature">20 PSD to HTML</div>
                    <div class="plan-feature">20 website design</div>
                    <div class="plan-feature">20 code revisions</div>
                    <div class="plan-feature">10 website SEO projects</div>
                    <div class="plan-feature">10 video editing projects</div>
                    <div class="plan-feature">500 image editing</div>
                  </div>
                  <a class="plan-link gradient-10" href="#">Go pro<i class="lni lni-chevron-right"></i></a> </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="window" id="blog">
      <div class="window-header">
        <div class="window-title">项目介绍</div>
        <div class="clearfix float-right window-header-btns">
          <div class="float-left pointer window-header-btn window-expand-btn"> <i class="lni lni-frame-expand"></i> </div>
          <div class="float-left pointer window-header-btn window-close-btn"> <a href="#"><i class="lni lni-close"></i></a> </div>
        </div>
      </div>
      <div class="window-body backdrop" data-simplebar>
        <div class="window-content">
          <div id="latest-blog-post-cover">
            <div class="blog-heading">Latest post</div>
            <div id="latest-blog-post">
              <div id="latest-blog-post-text">
                <div id="latest-blog-post-heading">Best trip plan for visiting gorgeous places in Canada during winter season</div>
                <a href="#" id="latest-blog-post-link">Read<i class="lni lni-arrow-right"></i></a> </div>
            </div>
          </div>
          <div id="popular-blog-post-cover">
            <div class="blog-heading">Popular posts</div>
            <div class="clearfix">
              <div class="float-left popular-blog-post-col"> <a href="#" class="popular-blog-post">
                <div class="popular-post-thumbnail"> <img src="assets/img/blog/blog-7.jpg" alt="Guidelines to become a power elite author on Themeforest"> </div>
                <div class="popular-post-title line-clamp">Guidelines to become a power elite author on Themeforest</div>
                </a> </div>
              <div class="float-left popular-blog-post-col"> <a href="#" class="popular-blog-post">
                <div class="popular-post-thumbnail"> <img src="assets/img/blog/blog-8.jpg" alt="Blog post thumbnail"> </div>
                <div class="popular-post-title line-clamp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
                </a> </div>
              <div class="float-left popular-blog-post-col"> <a href="#" class="popular-blog-post">
                <div class="popular-post-thumbnail"> <img src="assets/img/blog/blog-9.jpg" alt="Blog post thumbnail"> </div>
                <div class="popular-post-title line-clamp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
                </a> </div>
              <div class="float-left popular-blog-post-col"> <a href="#" class="popular-blog-post">
                <div class="popular-post-thumbnail"> <img src="assets/img/blog/blog-10.jpg" alt="Blog post thumbnail"> </div>
                <div class="popular-post-title line-clamp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
                </a> </div>
              <div class="float-left popular-blog-post-col"> <a href="#" class="popular-blog-post">
                <div class="popular-post-thumbnail"> <img src="assets/img/blog/blog-11.jpg" alt="Blog post thumbnail"> </div>
                <div class="popular-post-title line-clamp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
                </a> </div>
              <div class="float-left popular-blog-post-col"> <a href="#" class="popular-blog-post">
                <div class="popular-post-thumbnail"> <img src="assets/img/blog/blog-12.jpg" alt="Blog post thumbnail"> </div>
                <div class="popular-post-title line-clamp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
                </a> </div>
            </div>
          </div>
          <div class="clearfix" id="blog-body">
            <div class="blog-heading">Other awesome posts</div>
            <div class="float-left blog-post-col"> <a href="#" class="blog-post">
              <div class="blog-post-thumbnail"> <img src="assets/img/blog/blog-1.jpg" alt="10 dishes that you must try at home"> </div>
              <div class="blog-post-title line-clamp">10 dishes that you must try at home</div>
              <div class="blog-post-excerpt line-clamp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
              </a> </div>
            <div class="float-left blog-post-col"> <a href="#" class="blog-post">
              <div class="blog-post-thumbnail"> <img src="assets/img/blog/blog-2.jpg" alt="Things that you should know before visiting Switzerland"> </div>
              <div class="blog-post-title line-clamp">Things that you should know before visiting Switzerland</div>
              <div class="blog-post-excerpt line-clamp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
              </a> </div>
            <div class="float-left blog-post-col"> <a href="#" class="blog-post">
              <div class="blog-post-thumbnail"> <img src="assets/img/blog/blog-3.jpg" alt="How to make travelling a full-time job?"> </div>
              <div class="blog-post-title line-clamp">How to make travelling a full-time job?</div>
              <div class="blog-post-excerpt line-clamp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
              </a> </div>
            <div class="float-left blog-post-col"> <a href="#" class="blog-post">
              <div class="blog-post-thumbnail"> <img src="assets/img/blog/blog-4.jpg" alt="Acoustic guitar tips for beginners"> </div>
              <div class="blog-post-title line-clamp">Acoustic guitar tips for beginners</div>
              <div class="blog-post-excerpt line-clamp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
              </a> </div>
            <div class="float-left blog-post-col"> <a href="#" class="blog-post">
              <div class="blog-post-thumbnail"> <img src="assets/img/blog/blog-5.jpg" alt="Social media marketing hacks"> </div>
              <div class="blog-post-title line-clamp">Social media marketing hacks</div>
              <div class="blog-post-excerpt line-clamp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
              </a> </div>
            <div class="float-left blog-post-col"> <a href="#" class="blog-post">
              <div class="blog-post-thumbnail"> <img src="assets/img/blog/blog-6.jpg" alt="Food experiments at home for foodies"> </div>
              <div class="blog-post-title line-clamp">Food experiments at home for foodies</div>
              <div class="blog-post-excerpt line-clamp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
              </a> </div>
          </div>
          <div id="blog-pagination"> <a href="#" class="active">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> </div>
        </div>
      </div>
    </div>
    <div class="window" id="portfolio">
      <div class="window-header">
        <div class="window-title">图片展示</div>
        <div class="clearfix float-right window-header-btns">
          <div class="float-left pointer window-header-btn window-expand-btn"> <i class="lni lni-frame-expand"></i> </div>
          <div class="float-left pointer window-header-btn window-close-btn"> <a href="#"><i class="lni lni-close"></i></a> </div>
        </div>
      </div>
      <div class="window-body backdrop" data-simplebar>
        <div class="window-content">
          <div id="portfolio-tabs">
            <div class="portfolio-tab active" data-filter="*">All</div>
            <div class="portfolio-tab" data-filter=".portfolio-creative">Creative</div>
            <div class="portfolio-tab" data-filter=".portfolio-design">Design</div>
            <div class="portfolio-tab" data-filter=".portfolio-minimal">Minimal</div>
          </div>
          <div id="portfolio-content">
            <div class="clearfix" id="portfolio-body">
              <div class="float-left portfolio-item portfolio-design portfolio-minimal"> <a href="https://www.thewebcross.com" target="_blank"> <img src="assets/img/portfolio/p-1.jpg" alt="Portfolio item">
                <div class="portfolio-item-title"> <span class="gradient-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span> </div>
                </a> </div>
              <div class="float-left portfolio-item portfolio-creative portfolio-design"> <a href="https://www.thewebcross.com" target="_blank"> <img src="assets/img/portfolio/p-2.jpg" alt="Portfolio item">
                <div class="portfolio-item-title"> <span class="gradient-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span> </div>
                </a> </div>
              <div class="float-left portfolio-item portfolio-creative portfolio-design"> <a href="https://www.thewebcross.com" target="_blank"> <img src="assets/img/portfolio/p-3.jpg" alt="Portfolio item">
                <div class="portfolio-item-title"> <span class="gradient-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span> </div>
                </a> </div>
              <div class="float-left portfolio-item portfolio-creative portfolio-minimal"> <a href="https://www.thewebcross.com" target="_blank"> <img src="assets/img/portfolio/p-4.jpg" alt="Portfolio item">
                <div class="portfolio-item-title"> <span class="gradient-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span> </div>
                </a> </div>
              <div class="float-left portfolio-item portfolio-design"> <a href="https://www.thewebcross.com" target="_blank"> <img src="assets/img/portfolio/p-5.jpg" alt="Portfolio item">
                <div class="portfolio-item-title"> <span class="gradient-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span> </div>
                </a> </div>
              <div class="float-left portfolio-item portfolio-creative portfolio-minimal"> <a href="https://www.thewebcross.com" target="_blank"> <img src="assets/img/portfolio/p-6.jpg" alt="Portfolio item">
                <div class="portfolio-item-title"> <span class="gradient-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span> </div>
                </a> </div>
              <div class="float-left portfolio-item portfolio-design portfolio-minimal"> <a href="https://www.thewebcross.com" target="_blank"> <img src="assets/img/portfolio/p-7.jpg" alt="Portfolio item">
                <div class="portfolio-item-title"> <span class="gradient-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span> </div>
                </a> </div>
              <div class="float-left portfolio-item portfolio-creative portfolio-design"> <a href="https://www.thewebcross.com" target="_blank"> <img src="assets/img/portfolio/p-8.jpg" alt="Portfolio item">
                <div class="portfolio-item-title"> <span class="gradient-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span> </div>
                </a> </div>
              <div class="float-left portfolio-item portfolio-creative portfolio-design"> <a href="https://www.thewebcross.com" target="_blank"> <img src="assets/img/portfolio/p-9.jpg" alt="Portfolio item">
                <div class="portfolio-item-title"> <span class="gradient-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span> </div>
                </a> </div>
              <div class="float-left portfolio-item portfolio-creative portfolio-minimal"> <a href="https://www.thewebcross.com" target="_blank"> <img src="assets/img/portfolio/p-10.jpg" alt="Portfolio item">
                <div class="portfolio-item-title"> <span class="gradient-9">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span> </div>
                </a> </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="window" id="clients">
      <div class="window-header">
        <div class="window-title">合作客户</div>
        <div class="clearfix float-right window-header-btns">
          <div class="float-left pointer window-header-btn window-expand-btn"> <i class="lni lni-frame-expand"></i> </div>
          <div class="float-left pointer window-header-btn window-close-btn"> <a href="#"><i class="lni lni-close"></i></a> </div>
        </div>
      </div>
      <div class="window-body backdrop" data-simplebar>
        <div class="window-content">
          <div id="clients-content">
            <div id="clients-section-heading">Our awesome clients</div>
            <div class="clearfix" id="clients-body">
              <div class="float-left client"> <a href="#" class="client-logo"> <img src="assets/img/clients/coca-cola.svg" alt="Coca Cola">
                <div class="client-display-link">https://www.coca-cola.com</div>
                </a> </div>
              <div class="float-left client"> <a href="https://envato.com" target="_blank" class="client-logo"> <img src="assets/img/clients/envato.svg" alt="Envato">
                <div class="client-display-link">https://envato.com</div>
                </a> </div>
              <div class="float-left client"> <a href="https://google.com" target="_blank" class="client-logo"> <img src="assets/img/clients/google.svg" alt="Google">
                <div class="client-display-link">https://google.com</div>
                </a> </div>
              <div class="float-left client"> <a href="https://www.mclaren.com" target="_blank" class="client-logo"> <img src="assets/img/clients/mclaren.svg" alt="Mclaren">
                <div class="client-display-link">https://www.mclaren.com</div>
                </a> </div>
              <div class="float-left client"> <a href="https://firebase.google.com" target="_blank" class="client-logo"> <img src="assets/img/clients/firebase.svg" alt="Firebase">
                <div class="client-display-link">https://firebase.google.com</div>
                </a> </div>
              <div class="float-left client"> <a href="https://wordpress.com" target="_blank" class="client-logo"> <img src="assets/img/clients/wordpress.svg" alt="WordPress">
                <div class="client-display-link">https://wordpress.com</div>
                </a> </div>
              <div class="float-left client"> <a href="https://spotify.com" target="_blank" class="client-logo"> <img src="assets/img/clients/spotify.svg" alt="Spotify">
                <div class="client-display-link">https://spotify.com</div>
                </a> </div>
              <div class="float-left client"> <a href="https://airbnb.com/" target="_blank" class="client-logo"> <img src="assets/img/clients/airbnb.svg" alt="Airbnb">
                <div class="client-display-link">http://airbnb.com</div>
                </a> </div>
              <div class="float-left client"> <a href="https://www.rolls-royce.com" target="_blank" class="client-logo"> <img src="assets/img/clients/rolls-royce.svg" alt="Rolls Royce">
                <div class="client-display-link">https://www.rolls-royce.com</div>
                </a> </div>
              <div class="float-left client"> <a href="https://www.spacex.com" target="_blank" class="client-logo"> <img src="assets/img/clients/spacex.svg" alt="SpaceX">
                <div class="client-display-link">https://www.spacex.com</div>
                </a> </div>
              <div class="float-left client"> <a href="https://www.zara.com" target="_blank" class="client-logo"> <img src="assets/img/clients/zara.svg" alt="Zara">
                <div class="client-display-link">https://www.zara.com</div>
                </a> </div>
              <div class="float-left client"> <a href="https://www.xbox.com" target="_blank" class="client-logo"> <img src="assets/img/clients/xbox.svg" alt="Xbox">
                <div class="client-display-link">https://www.xbox.com</div>
                </a> </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="window" id="testimonials">
      <div class="window-header">
        <div class="window-title">专业团队</div>
        <div class="clearfix float-right window-header-btns">
          <div class="float-left pointer window-header-btn window-expand-btn"> <i class="lni lni-frame-expand"></i> </div>
          <div class="float-left pointer window-header-btn window-close-btn"> <a href="#"><i class="lni lni-close"></i></a> </div>
        </div>
      </div>
      <div class="window-body max-height backdrop" data-simplebar>
        <div class="window-content max-height">
          <div class="testimonial max-height flex-center">
            <div class="testimonial-info max-height flex-center gradient-10">
              <div class="testimonial-info-body">
                <div class="testimonial-photo"> <img src="assets/img/testimonials/img-1.jpg" alt="Testimonial photo"> </div>
                <div class="testimonial-person-name">Roxanne</div>
                <div class="testimonial-person-designation"> <span>UX Engineer,</span> <a href="https://www.google.com" target="_blank"> <span>@Google</span> <b>Open link</b> </a> </div>
              </div>
            </div>
            <div class="testimonial-text-cover max-height">
              <div class="testimonial-text">
                <div class="testimonial-text-body">
                  <div class="testimonial-text-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                </div>
              </div>
            </div>
          </div>
          <div class="testimonial max-height flex-center">
            <div class="testimonial-info max-height flex-center gradient-8">
              <div class="testimonial-info-body">
                <div class="testimonial-photo"> <img src="assets/img/testimonials/img-2.jpg" alt="John Doe"> </div>
                <div class="testimonial-person-name">John Doe</div>
                <div class="testimonial-person-designation"> <span>Front-end Engineer,</span> <a href="#"> <span>@Coca Cola</span> <b>Open link</b> </a> </div>
              </div>
            </div>
            <div class="testimonial-text-cover max-height">
              <div class="testimonial-text">
                <div class="testimonial-text-body">
                  <div class="testimonial-text-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                </div>
              </div>
            </div>
          </div>
          <div class="testimonial max-height flex-center">
            <div class="testimonial-info max-height flex-center gradient-5">
              <div class="testimonial-info-body">
                <div class="testimonial-photo"> <img src="assets/img/testimonials/img-3.jpg" alt="Chandler Bing"> </div>
                <div class="testimonial-person-name">John Doe Jr.</div>
                <div class="testimonial-person-designation"> <span>Aerospace Engineer,</span> <a href="https://www.spacex.com" target="_blank"> <span>@SpaceX</span> <b>Open link</b> </a> </div>
              </div>
            </div>
            <div class="testimonial-text-cover max-height">
              <div class="testimonial-text">
                <div class="testimonial-text-body">
                  <div class="testimonial-text-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="contact">
    <div id="contact-body"> <a href="https://themeforest.net/user/thewebcross/portfolio" target="_blank" class="contact-btn"> <i class="lni lni-envato"></i>
      <div class="contact-btn-bg gradient-5"></div>
      </a> <a href="#" target="_blank" class="contact-btn"> <i class="lni lni-linkedin-original"></i>
      <div class="contact-btn-bg gradient-10"></div>
      </a> <a href="#" target="_blank" class="contact-btn"> <i class="lni lni-twitter-original"></i>
      <div class="contact-btn-bg gradient-4"></div>
      </a> <a href="#" target="_blank" class="contact-btn"> <i class="lni lni-facebook-original"></i>
      <div class="contact-btn-bg gradient-2"></div>
      </a>
      <div id="contact-email"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f3999c9b9ddd979c96b39a9d959cdd909c9e">[email&#160;protected]</a></div>
      <a href="#" id="contact-close-btn"> <i class="lni lni-close"></i> </a> </div>
  </div>
  <nav id="main-nav">
    <div id="main-nav-body">
      <div id="main-nav-tb-container">
        <div id="main-nav-tb" class="container backdrop">
          <div class="row" id="main-nav-links"> <a class="col" href="#about">
           <i class="lni lni-postcard"></i>
            <span>关于我们</span> </a> <a class="col" href="#skills">
             <i class="lni lni-brush"></i>
             <span>技能展示</span>
              </a> <a class="col" href="#education"> <i class="lni lni-graduation"></i>
               <span>教育背景</span> </a> <a class="col" href="#experience"> <i class="lni lni-network"></i>
				<span>工作经历</span> </a> <a class="col" href="#services"> <i class="lni lni-briefcase"></i>
				 <span>项目经验</span> </a> <a class="col" href="#blog"> <i class="lni lni-write"></i>
				  <span>项目介绍</span> </a> <a class="col" href="#portfolio"> <i class="lni lni-pallet"></i>
				   <span>图片展示</span> </a> <a class="col" href="#clients"> <i class="lni lni-consulting"></i>
				    <span>合作客户</span> </a> <a class="col" href="#testimonials"> <i class="lni lni-quotation"></i>
				     <span>专业团队</span> </a> <a class="col" href="#contact"> <i class="lni lni-envelope"></i>
      				  <span>联系我们</span> </a> </div>
        </div>
      </div>
    </div>
  </nav>
</main>
<aside id="know-more-section" class="flex-center">
  <h1 class="know-more-heading">更多的了解我的工作</h1>
  <div id="video-body" align="center">
	    <video id="video" src="fun.mp4" width="100%" controls></video>
  </div>
</aside>
<aside id="splash-screen" class="flex-center"> <img src="assets/img/loader/loader.svg" alt="Splash screen loader"> <span>Loading ...</span> </aside>
<script src="assets/js/jquery-1.10.2.js"></script>
<script src="assets/js/plugins/imagesloaded.min.js" type="text/javascript"></script> 
<script src="assets/js/plugins/simplebar.min.js" type="text/javascript"></script> 
<script src="assets/js/plugins/isotope.min.js" type="text/javascript"></script> 
<script src="assets/js/custom.js" type="text/javascript"></script>
</body>
</html>
